<template>
    <div>
        <div class="container" v-if="!isDataTable">
          <div class="handle-box">
                <el-input class="handle-input" v-model="form.org" placeholder="所属机构">
                    <template #append>
                        <el-select v-model="form.org" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.organizations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
             </el-select>
                    </template>
                </el-input>
                <el-input class="handle-input" v-model="form.branch" placeholder="所属分支">
                    <template #append>
                        <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>
                    </el-input>
                <el-input class="handle-input" v-model="form.field" placeholder="专业方向">   
                    <template #append>          
                        <el-select  v-model="form.field" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>   
             </el-input>
                <el-input class="handle-input" v-model="form.clazz" placeholder="班级">   
                    <template #append>          
                        <el-select  v-model="form.clazz" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.classes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>   
             </el-input>
             <el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
          </div>

             <el-table ref="multipleTableRef" 
                :header-cell-style="{color:'#2A62BC'}"
                 :data="tableData"   
                 style="width: 100%;" 
                size="small"
                border
                @selection-change="handleSelectionChange" v-if="isDisplay">
                <el-table-column   type="selection" width="35" />
                <el-table-column  prop="name" label="姓名"  ></el-table-column>
                <el-table-column  label="学习进度">
                    <template #default="scope">
                        <el-progress
                            :text-inside="true"
                            :stroke-width="20"
                            :percentage="scope.row.stu_pre"
                            status="success"
                            color="#0AB394"

                            />
                    </template>
                </el-table-column>
                <el-table-column prop="homework_pre" label="作业进度">
                    <template #default="scope">
                        <el-progress
                            :text-inside="true"
                            :stroke-width="20"
                            :percentage="scope.row.homework_pre"
                            status="success"
                            color="#0AB394"
                            />
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center" >
                   <template #default="scope">
                      <el-row class="right-btn">
                          <el-button color="#0ab394"  @click="open(scope.$index,scope.row)" >
                            <i class="iconfont icon-info-circle-fill white"></i>详情
                         </el-button>          
                      </el-row>
                   </template>
                </el-table-column>
             </el-table>
             <!-- 分页 -->
             <div class="pagination" v-if="isDisplay">
                <el-pagination
                :current-page="query.pageIndex"
                   :page-size="query.pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   :small="small"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageTotal"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"/>
             </div>
       </div>  
          <!-- </div> -->
          <TableData v-else></TableData>
       </div>
    </template>
    
<script setup lang="ts">
import { ref, reactive ,toRefs,onMounted} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
import { getPres } from '../../api/clazz' ;
import TableData from '../analysis/TableData.vue';
import { useRouter } from 'vue-router';
const router  = useRouter()
//点击详情  组件展示的修改
const isDataTable=ref(false)
const open=(index,row)=>{
   // router.push('/dataTable')
   isDataTable.value=true
}


 let form = reactive({
        id:'',
        name:'',
        field:'',
        org:'',
        branch:'',
        clazz:''
    });
 
    const options = reactive({
     organizations:[
       {
          value: '天龙八部',
          label: '天龙八部',
         },
      {
        value: '神雕侠侣',
        label: '神雕侠侣',
      },
      {
        value: '仙剑奇侠传',
        label: '仙剑奇侠传',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },
      ],
      branch:[{
        value: '英语',
        label: '英语',
         },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      
      dirs:[{
        value: '英语',
        label: '英语',
         },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      classes:[
       {
          value: 'JAVA',
          label: 'JAVA',
          },
       {
          value: 'Android',
          label: 'Android',
       },
       {
          value: 'mysql',
          label: 'mysql',
       },
      ],
      courses:[{
        value: 'JAVA',
        label: 'JAVA',
         },
      {
        value: 'Android',
        label: 'Android',
      },
      {
        value: 'mysql',
        label: 'mysql',
      },],
      
    }
    )
       
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
       pageIndex: 1,
       pageSize: 5,
    });
    //
    
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
       multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getPres({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
          let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val: number) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
       query.pageIndex = val;
       console.log(val,"==")
       console.log(query.pageSize)
       getData()
    };
    
    
    //是够启用调用后台接口
    const  changeSwitch=(status)=>{
        //调用后台修改接口
        console.log(status,'>>>status');
    }
    
    // 删除单个操作
    const handleDelete = (index) => {
       // 二次确认删除
       ElMessageBox.confirm('确定要删除吗？', '提示', {
          type: 'warning'
       })
       .then(() => {
          ElMessage.success('删除成功');
          //to 传递id 到后台 
          tableData.value.splice(index, 1);
          // 删除成功后
          // getData()
       })
       .catch(() => {});
    };
    //删除多个数据  to......
    const handleAllDelete =()=>{
       // console.log('删除多个')
       console.log(state.multipleSelection,'===拿到所有选择的数据====')
       if (state.multipleSelection.length==0) {
          ElMessage.error('请选择项')
          return
         }
       // console.log(state.multipleSelection.map(item=>item.id))
       //axios删除的操作
       // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})
    
       
    }
    
    
    // 查询操作  to... 需要自己实现与后台交互
    const  isDisplay = ref(false)
    const handleSearch = () => {
       query.pageIndex = 1;
       isDisplay.value = true
       getData();
    };
    
    
    
    
    </script >
    <style lang="less" scoped>
    .handle-box {
       margin-bottom: 20px;   
       .handle-btn{
          margin-left: 8px;
       }    
    }
    
 
    
    .handle-input {
       width:245px;
        margin-right: 8px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 700; 
    }
    .table {
       width: 100%;
       font-size: 14px;
    }
    .red {
       color: #F56C6C;
    }
    .blue {
       color: #1296e2;
       font-weight: bold;
    }
    .mr10 {
       margin-right: 10px;
    }
    .table-td-thumb {
       display: block;
       margin: auto;
       width: 40px;
       height: 40px;
    }
    .cell{
        display: inline-block;
        .el-button{
            margin-left: 0px;
        }
    }
    .el-col {
      border-radius: 4px;
      margin-left: 10px;
    }
    .el-button-group{
        float: right;
    }
    .top-btn{
       float: right;
       .el-button{
          margin-left: 5px;
       }
    }
    .right-btn{
        justify-content:center;
       .el-button{
          height: 22px;
          // width: 60px;
          margin-right: 10px;
          padding: 1px 5px;
       }
    }
    
    
    </style>